<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件上传基础知识</title>
</head>

<body>
  <form action="" method="post" enctype="multipart/form-data">

    <label for="myfile">文件浏览</label>
    <input id="myfile" type="file" accept="image/*">
  </form>

  <!-- multipart/form-data -->
  <!-- 自定义文件浏览界面 -->

  <div>
    <button id="btnFile">浏览文件</button>
    
  </div>

  <script>
    let btnFile = document.getElementById('btnFile')
    btnFile.addEventListener('click',
      function () {
        //虚拟文件表单元素
        let file = document.createElement('input');
        file.setAttribute('type', 'file');

        file.addEventListener('change',
          function (ev) {
            console.log('文件选择变化事件', ev);
            //如果触发了change事件,肯定有选中文件
            //可以通过file表单元素的files获取选中的文件列表
            console.log(file.files);
            //查看文件信息
            console.log("单一文件信息:"
              , file.files[0])
          });

        //模拟点击 (浏览文件动作)
        file.click();

      })
  </script>

</body>

</html>